<script setup lang="ts">
import {ref} from 'vue'
import {ElMessage} from 'element-plus'
import {ConfigControllerService, SetControllerService, SetVO} from "../../../../generated"
import draggable from 'vuedraggable'
import {Rank} from '@element-plus/icons-vue'
import SetSelectionDialog from './SetSelectionDialog.vue'

// 学习计划管理
const studyPlanList = ref<SetVO[]>([])
const selectSetDialogVisible = ref(false)
const hasUnsavedChanges = ref(false)

// 获取学习计划列表
const fetchStudyPlans = async () => {
  try {
    const res = await SetControllerService.listHomeUsingGet()
    if (res.data) {
      studyPlanList.value = res.data
    }
  } catch (error) {
    ElMessage.error('获取学习计划列表失败')
  }
}

// 保存学习计划
const saveStudyPlan = async () => {
  if (!studyPlanList.value) {
    ElMessage.error('学习计划列表为空')
    return
  }
  const idList = studyPlanList.value.map((item) => String(item.id))
  let res = await ConfigControllerService.updateStudyPlanUsingPost({
    idList
  });
  if (res.code === 0 && res.data) {
    ElMessage.success('更新成功');
    await fetchStudyPlans();
  } else {
    ElMessage.success(res.message)
  }
}

// 删除学习计划
const deleteStudyPlan = async (id: string) => {
  studyPlanList.value = studyPlanList.value.filter(item => item.id !== id)
  hasUnsavedChanges.value = true
}

// 修改 handleSelectSet 函数
const handleSelectSet = (set: SetVO) => {
  studyPlanList.value.push(set)
  hasUnsavedChanges.value = true
}

const handleEndDrag = () => {
  hasUnsavedChanges.value = true
}

// 初始化数据
fetchStudyPlans()
</script>

<template>
  <el-card class="manage-section">
    <template #header>
      <div class="card-header">
        <span>学习计划管理</span>
        <div class="header-actions">
          <el-button
              type="primary"
              :disabled="!hasUnsavedChanges"
              @click="saveStudyPlan"
          >
            保存修改
          </el-button>
          <el-button
              type="primary"
              @click="selectSetDialogVisible = true"
          >
            添加题集
          </el-button>
        </div>
      </div>
    </template>

    <el-empty v-if="studyPlanList.length===0" description="no data"/>

    <draggable
        v-model="studyPlanList"
        item-key="id"
        handle=".drag-handle"
        @dragend="handleEndDrag"
        :animation="150"
        ghost-class="ghost-class"
    >
      <template #item="{ element }">
        <div class="study-plan-item">
          <el-icon class="drag-handle">
            <Rank/>
          </el-icon>
          <el-image
              v-if="element.cover"
              :src="element.cover"
              style="width: 100px; height: 50px"
          />
          <div class="study-plan-info">
            <div class="submission-title">{{ element.title }}</div>
            <div class="description">{{ element.target }}</div>
          </div>
          <el-button
              type="danger"
              size="small"
              @click="deleteStudyPlan(element.id)"
          >
            删除
          </el-button>
        </div>
      </template>
    </draggable>

    <!-- 选择题集对话框 -->
    <SetSelectionDialog
        v-model:visible="selectSetDialogVisible"
        title="选择题集"
        :existing-ids="studyPlanList?.map(item => item.id) || []"
        @select="handleSelectSet"
    />
  </el-card>
</template>

<style scoped>
.manage-section {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:deep(.el-card__header) {
  padding: 15px 20px;
  font-weight: bold;
}

.study-plan-item {
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #fff;
  position: relative;
  z-index: 1;
}

.drag-handle {
  cursor: move;
  margin-right: 15px;
  color: #909399;
}

.study-plan-info {
  flex: 1;
  margin: 0 15px;
}

.study-plan-info .submission-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.study-plan-info .description {
  color: #909399;
  font-size: 14px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

:deep(.ghost-class) {
  opacity: 0.5;
  background: #c8ebfb;
  border: 1px dashed #409eff;
}
</style>